<template>
  <div class="page_album">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"

    >
      <ul class="com">
        <li v-for="item in list" :key="item.albumId">
          <a :href="`#${item.url}`">
            <album-item
              :albumId="item.albumId"
              :img="item.img"
              :title="item.title"
              :des="item.des"
              :play="item.play"
              :tracks="item.tracks"
              :nickname="item.nickname"
              :url="item.url"
            ></album-item>
          </a>
        </li>
      </ul>
      <template #loading>
        <div class="loading">
          <van-loading color="#ff1e00" type="spinner" />
        </div>
      </template>
    </van-list>


    <!-- <div class="loading">
          <van-loading color="#ff1e00" type="spinner" />
    </div> -->
    <my-footer v-if="list.length"></my-footer>
  </div>
</template>

<script>
import AlbumItem from "@/views/search/searchcomp/AlbumItem.vue";
import { initAllSearchData } from "@/request/api.js";
import { mapState } from 'vuex'
export default {
  name: "PageAlbum",
    computed:{
    ...mapState(['condition','fq']),
    // ...mapState([])
  },
  data() {
    return {
      list: [],
      page: 1,
      rows: 20,
      category_id: "",
      // condition: "relation",
      paidFilter: false,
      // fq: "is_paid:false",

      loading: true,
      finished: false,
    };
  },
  components: {
    AlbumItem,
  },
  props: {
    kw: {
      type: String,
    },
  },
  created() {
    this.initData();
  },
  watch:{
    condition(){
      this.list = []
      this.page = 1
      this.loading = true
      this.finished = false
      this.initData()
    },
    fq(){
      this.list = []
      this.page = 1
       this.loading = true
      this.finished = false
      this.initData()

    }
  },
  methods: {
    async initData() {
      let params = {
          kw: this.kw,
        core: "album",
        page: this.page,
        rows: this.rows,
       condition:this.condition,
        paidFilter:this.paidFilter,
        fq:this.fq
      };
      let { data: res } = await initAllSearchData(params);
      console.log("专辑", res);
      let list = [];
      res.data.albumViews.albums.forEach((item) => {
        let obj = {
          albumId: item.albumInfo.id,
          title: item.albumInfo.title,
          des: item.albumInfo.intro,
          nickname: item.albumInfo.nickname,

          play: item.albumInfo.play,
          tracks: item.albumInfo.tracks,
          img: item.albumInfo.cover_path,
          url: item.pageUriInfo.url,
        };
        list.push(obj);
      });

      this.list.push(...list);

      this.loading = false;

      if (list.length == 0) {
        this.finished = true;
      }
    },

    onLoad() {
      this.page++;
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.com {
  li {
    padding-left: 15px;
    a {
      display: block;
      border-bottom: 1px solid #e8e8ee;
    }
  }
}
 .loading{
     text-align: center;
 }

</style>

